<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="/favicon.ico" />
    <!-- <link rel="stylesheet" href="./iconfont.css"> -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_5039891_j6k65z20j8s.css" />
    <title>智慧医院系统</title>
    <!--[if lt IE 11
      ]><script>
        window.location.href = '/html/ie.html'
      </script><!
    [endif]-->
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .chromeframe {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
      }

      /* 加载动画容器 - 全屏覆盖 */
      #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 70%, #e3f2fd 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition:
          opacity 0.5s ease-out,
          visibility 0.5s ease-out;
      }

      /* 医院Logo容器 */
      .hospital-logo {
        position: relative;
        width: 120px;
        height: 120px;
        margin-bottom: 40px;
        animation: logoFloat 3s ease-in-out infinite;
      }

      /* SVG医院图标 */
      .hospital-icon {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 4px 8px rgba(64, 158, 255, 0.3));
      }

      /* 电子轨道动画效果 */
      .orbit-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
      }

      .orbit {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid rgba(64, 158, 255, 0.3);
        border-radius: 50%;
        animation: orbitRotate 2s linear infinite;
      }

      .orbit:nth-child(1) {
        width: 100%;
        height: 100%;
        animation-duration: 3s;
      }

      .orbit:nth-child(2) {
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        animation-duration: 2.5s;
        animation-direction: reverse;
      }

      .orbit:nth-child(3) {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 20%;
        animation-duration: 2s;
      }

      .orbit::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: #409eff;
        border-radius: 50%;
        box-shadow: 0 0 10px #409eff;
      }

      /* 进度条容器 */
      .progress-container {
        width: 300px;
        margin-bottom: 30px;
      }

      .progress-bar {
        width: 100%;
        height: 4px;
        background: rgba(64, 158, 255, 0.2);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #409eff 0%, #66b1ff 50%, #409eff 100%);
        border-radius: 2px;
        width: 0%;
        animation: progressFill 2.5s ease-out forwards;
        position: relative;
      }

      .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
        animation: progressShine 1s ease-in-out infinite;
      }

      /* 加载文字 */
      .load-title {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        color: #2c3e50;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
        opacity: 0;
        animation: fadeInUp 0.8s ease-out 0.5s forwards;
      }

      .load-subtitle {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        color: #7f8c8d;
        font-size: 14px;
        text-align: center;
        opacity: 0;
        animation: fadeInUp 0.8s ease-out 0.8s forwards;
      }

      /* 加载状态点 */
      .loading-dots {
        display: inline-block;
        margin-left: 8px;
      }

      .loading-dots::after {
        content: '';
        animation: loadingDots 1.5s steps(4, end) infinite;
      }

      /* 动画定义 */
      @keyframes logoFloat {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      @keyframes orbitRotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes progressFill {
        0% {
          width: 0%;
        }
        100% {
          width: 100%;
        }
      }

      @keyframes progressShine {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      @keyframes fadeInUp {
        0% {
          opacity: 0;
          transform: translateY(20px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes loadingDots {
        0% {
          content: '';
        }
        25% {
          content: '.';
        }
        50% {
          content: '..';
        }
        75% {
          content: '...';
        }
        100% {
          content: '';
        }
      }

      /* 加载完成时的淡出效果 */
      .loaded #loader-wrapper {
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.5s ease-out,
          visibility 0.5s ease-out;
      }

      .no-js #loader-wrapper {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="loader-wrapper">
        <!-- 医院Logo和电子轨道 -->
        <div class="hospital-logo">
          <!-- SVG医院图标 -->
          <svg class="hospital-icon" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
            <!-- 背景圆 -->
            <circle cx="60" cy="60" r="55" fill="#ffffff" stroke="#409eff" stroke-width="2" />
            <!-- 十字医院标志 -->
            <g fill="#409eff">
              <!-- 垂直线 -->
              <rect x="55" y="25" width="10" height="50" rx="2" />
              <!-- 水平线 -->
              <rect x="35" y="45" width="50" height="10" rx="2" />
            </g>
            <!-- 医疗十字中心点 -->
            <circle cx="60" cy="60" r="4" fill="#ffffff" />
            <!-- 底部文字区域 -->
            <rect x="20" y="80" width="80" height="20" fill="#409eff" rx="10" />
            <text x="60" y="93" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="bold">智慧医院</text>
          </svg>

          <!-- 电子轨道动画 -->
          <div class="orbit-container">
            <div class="orbit"></div>
            <div class="orbit"></div>
            <div class="orbit"></div>
          </div>
        </div>

        <!-- 进度条 -->
        <div class="progress-container">
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>

        <!-- 加载文字 -->
        <div class="load-title">智慧医院系统加载中<span class="loading-dots"></span></div>
        <div class="load-subtitle">请稍候，正在为您准备最佳体验</div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
    <script>
      // 加载动画控制
      window.addEventListener('load', function () {
        // 模拟加载过程，确保动画完整展示
        setTimeout(function () {
          document.body.classList.add('loaded')
        }, 3000) // 3秒后隐藏加载动画
      })

      // 进度条动画控制
      document.addEventListener('DOMContentLoaded', function () {
        const progressFill = document.querySelector('.progress-fill')
        if (progressFill) {
          // 监听动画结束事件
          progressFill.addEventListener('animationend', function () {
            // 进度条完成后可以执行其他操作
            console.log('加载进度完成')
          })
        }
      })
    </script>
  </body>
</html>
